<template>
    <div class="time_content">
        <div class="timeBox">
            <span v-for="(item,index) in timeArr" :key="index">{{item}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Timer',
    data() {
        return {
            timeArr: []
        }
    },
    methods: {
        getTime() {
            let date = new Date()
            let year = date.getFullYear().toString() // 年
            let month = date.getMonth() + 1; // 月
            month = month.toString()
            let day = date.getDate(); // 日
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
                day = "0" + day;
            }
            let time = year + month + day;
            this.timeArr = time.split('')
        }
    },
    created() {
        this.getTime()
    }
}
</script>

<style lang="scss" scoped>
.time_content {
    .timeBox {
        width: 90%;
        height: 60px;
        background-color: rgba(118, 239, 118, 0.617);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        margin: 10px auto;
        

        span {
            background-color: rgb(255, 255, 255);
            margin: 0 5px;
            padding: 0px 4px;
            border-radius: 5px;
        }
    }

    .timeBox span:nth-child(4)::after {
        content: ',';
        background-color: rgba(118, 239, 118, 0.617);
        position: relative;
        left: 6px;
    }

    .timeBox span:nth-child(6)::after {
        content: ',';
        background-color: rgba(118, 239, 118, 0.617);
        position: relative;
        left: 6px;
    }
}
</style>